<!--
 * @Author: wu_zh
 * @Date: 2021-09-23 20:05:50
 * @LastEditors: wu_zh
 * @LastEditTime: 2021-09-30 13:54:58
 * @Descripttion: 
-->
<template>
  <fks-dialog
    v-bind="$attrs"
    title="关联数据选择"
    @open="open()"
    @close="close()"
    append-to-body
  >
    <fks-query-page
      :data="associateTableData"
      tableName="关联表单"
      :page="false"
      highlight-current-row
      @current-change="currentCellChange"
      @query="getAssociateData()"
    >
      <fks-table-column
        type="index"
        align="center"
        label="#"
        key="2"
      ></fks-table-column>
      <fks-table-column
        v-for="col in associatecolumns"
        :key="col.id"
        :label="col.name"
        :prop="col.id"
      >
        <div v-if="col.tagAttribute === 'information'">
          <fks-table-column label="填写人" key="1">
            <template slot-scope="scope">
              {{
                typeof scope.row[col.id] == 'string'
                  ? JSON.parse(scope.row[col.id]).userFullname
                  : ''
              }}
            </template>
          </fks-table-column>
          <fks-table-column label="填写部门" key="2" width="200px">
            <template slot-scope="scope">
              {{
                typeof scope.row[col.id] == 'string'
                  ? JSON.parse(scope.row[col.id]).prjDepName
                  : ''
              }}
            </template>
          </fks-table-column>
          <fks-table-column label="填写时间" key="3" width="150px">
            <template slot-scope="scope">
              {{
                typeof scope.row[col.id] == 'string'
                  ? $dayjs(JSON.parse(scope.row[col.id]).createDate).format(
                      'YYYY-MM-DD HH:mm:ss'
                    )
                  : ''
              }}
            </template>
          </fks-table-column>
          <fks-table-column label="联系方式" key="4" width="100px">
            <template slot-scope="scope">
              {{
                typeof scope.row[col.id] == 'string'
                  ? JSON.parse(scope.row[col.id]).userTelephoneNum
                  : ''
              }}
            </template>
          </fks-table-column>
        </div>
        <template slot-scope="scope">
          <!-- <div v-if="col.id==='process_state'">
                <fks-tag :type="transformType(scope.row.process_state)">
                  {{ scope.row.process_state }}
                </fks-tag>
              </div> -->
          <div
            v-if="
              col.tagAttribute === 'switch' || col.tagAttribute === 'switch'
            "
          >
            <fks-switch
              disabled
              active-value="true"
              inactive-value="false"
              :value="scope.row[col.id]"
            ></fks-switch>
          </div>
          <div v-else>{{ transfer(col, scope.row) }}</div>
        </template>
      </fks-table-column>
    </fks-query-page>
    <div slot="footer">
      <fks-button type="primary" @click="handelConfirm">
        确定
      </fks-button>
      <fks-button @click="close()">
        取消
      </fks-button>
    </div>
  </fks-dialog>
</template>

<script>
import { getAssociateData } from './api.js'
export default {
  components: {},
  props: {
    fieldvModel: ''
  },
  data() {
    return {
      associateTableData: [],
      associatecolumns: [],
      currentRow: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    getAssociateData() {
      getAssociateData({ formKey: this.$route.params.formKey }).then((res) => {
        if (res.status) {
          let pageClumnsData = res.data[this.fieldvModel].column
          let pageTagAttrData = res.data[this.fieldvModel].tagAttribute
          this.associateTableData = res.data[this.fieldvModel].fields
          this.associatecolumns = []
          for (const key in pageClumnsData) {
            if (pageClumnsData.hasOwnProperty(key)) {
              let obj = {}
              obj.id = key
              obj.name = pageClumnsData[key]
              this.associatecolumns.push(obj)
            }
          }
          this.associatecolumns.forEach((item) => {
            if (pageTagAttrData.hasOwnProperty(item.id)) {
              item.tagAttribute = pageTagAttrData[item.id]
            }
          })
          this.associatecolumns = this.associatecolumns.filter((item) => {
            return (
              ['upload', 'wang-editor', 'detail-table'].indexOf(
                item.tagAttribute
              ) == -1
            )
          })
        }
      })
    },
    /**
     * @description: 确认选择数据
     * @param {*}
     * @return {*}
     */
    handelConfirm() {
      if (Object.keys(this.currentRow).length > 0) {
        this.$emit('mapFormData', this.currentRow)
        this.close()
      } else {
        this.$message.warning('请选择表单数据')
      }
    },
    currentCellChange(currentRow) {
      this.currentRow = currentRow
    },
    open() {
      this.getAssociateData()
    },
    close() {
      this.$emit('update:visible', false)
    },
    //表格数据转化
    transfer(col, row) {
      let data = row[col.id]
      if (!data) {
        return ''
      }
      if (col.tagAttribute === 'cascader') {
        return JSON.parse(data).join('/')
      } else if (
        col.tagAttribute === 'date-range' ||
        col.tagAttribute === 'time-range'
      ) {
        return JSON.parse(data).join('～')
      } else if (col.tagAttribute === 'check-box') {
        return JSON.parse(data).join('，')
      } else if (col.tagAttribute === 'notify') {
        // const list = ["站内信","短信","邮件"]
        let arr = JSON.parse(data)
        let list = []
        arr.forEach((item) => {
          if (item == '0') {
            list.push('站内信')
          } else if (item == '1') {
            list.push('短信')
          } else if (item == '2') {
            list.push('邮件')
          }
        })
        return list.join(',')
      } else if (col.tagAttribute === 'date') {
        return data.substring(0, data.length - 8)
      } else if (col.tagAttribute === 'org-selector') {
        return JSON.parse(data).deptName
      } else if (col.tagAttribute === 'user-selector') {
        return JSON.parse(data).userfullname
      } else {
        return data
      }
    },
    //流程状态字段tag类型
    transformType(process_state) {
      if (
        process_state === '流转中' ||
        process_state === '未完成' ||
        process_state === '暂存'
      ) {
        return ''
      } else if (process_state === '已完成') {
        return 'success'
      } else if (process_state === '已废弃') {
        return 'danger'
      }
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
